import React, { Component } from 'react'
import { Carousel } from 'antd-mobile'

import img1 from '../../assets/images/banner1.png'
import img2 from '../../assets/images/banner2.png'
import img3 from '../../assets/images/banner3.png'

export default class KBanner extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data: [img1, img2, img3],
            imgHeight: 176
        }
    }
    render() {
        return (
            <div>
                <Carousel
                    autoplay={true}
                    infinite
                    autoplayInterval={5000}
                >
                    {this.state.data.map(val => (
                        <a
                            key={val}
                            href="http://www.alipay.com"
                            style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                        >
                            <img
                                src={val}
                                alt=""
                                style={{ width: '100%', verticalAlign: 'top' }}
                                onLoad={() => {
                                    // fire window resize event to change height
                                    window.dispatchEvent(new Event('resize'));
                                    this.setState({ imgHeight: 'auto' });
                                }}
                            />
                        </a>
                    ))}
                </Carousel>
            </div>
        )
    }
}
